<template>
    <!-- 人员管理-实名制-班组管理 -->
    <div class="empGroup">
        <div class="top">
            <div class="search">
                <div class="list">
                    <Select
                        v-model="corpId"
                        style="width: 200px"
                        placeholder="合作单位:全部">
                        <Option
                            v-for="(item, index) in corpList"
                            :value="item.corpId"
                            :key="index"
                            >{{ item.corpName }}</Option
                        >
                    </Select>
                    <input
                        type="password"
                        autocomplete="new-password"
                        style="display: none" />
                </div>
                <div class="list">
                    <Input
                        v-model="keyword"
                        placeholder="班组名称搜索"
                        style="width: 200px"
                        clearable />
                    <input
                        type="password"
                        autocomplete="new-password"
                        style="display: none" />
                </div>
                <div
                    class="list"
                    @click="onSerch">
                    <Button type="primary">搜索</Button>
                </div>
                <div
                    class="list"
                    @click="onReset">
                    <Button>重置</Button>
                </div>
            </div>
            <div class="down">
                <el-button
                    type="primary"
                    :disabled="!btnList.includes('emp/group/add')"
                    @click="updateRow(0)"
                    size="small"
                    plain
                    >添加班组</el-button
                >
            </div>
        </div>
        <div class="bottom">
            <div class="table">
                <el-table
                    :data="list"
                    :height="tableHeight"
                    :stripe="true">
                    <el-table-column
                        fixed
                        prop="groupName"
                        label="班组名称"></el-table-column>
                    <el-table-column prop="corpName">
                        <template
                            slot="header"
                            slot-scope="scope">
                            <span>合作单位</span>
                            <span
                                class="updateCorp"
                                @click="handleUpdateCorp"
                                >更新</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="responsiblePersonName"
                        label="责任人"></el-table-column>
                    <el-table-column
                        prop="syncState"
                        label="同步状态">
                        <template slot-scope="scope">
                            <el-tag
                                type="info"
                                size="small"
                                v-if="scope.row.syncState == 0"
                                >未同步</el-tag
                            >
                            <el-tag
                                type="success"
                                size="small"
                                v-if="scope.row.syncState == 1"
                                >已同步</el-tag
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        width="300"
                        align="center">
                        <template slot-scope="scope">
                            <el-button
                                @click.native.prevent="updateRow(1, scope.$index, list)"
                                type="text"
                                size="small"
                                :disabled="!btnList.includes('emp/group/edit')"
                                >编辑</el-button
                            >
                            <el-button
                                style="color: red"
                                @click.native.prevent="remove(scope.$index, list)"
                                type="text"
                                size="small"
                                :disabled="!btnList.includes('emp/group/delete')"
                                >删除</el-button
                            >
                            <el-button
                                v-if="btnList.includes('emp/group/sync')"
                                @click.native.prevent="handleSync(scope.row)"
                                type="text"
                                size="small"
                                >同步</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div
                class="clearfix"
                 >
                <div class="float-right">
                    <Page
                        v-if="totalCount"
                        style="margin: 20px 0; text-align: center"
                        :current.sync="current"
                        :total="totalCount"
                        :page-size="pageSize"
                        show-elevator
                        show-total
                        show-sizer
                        @on-change="pageChange"
                        @on-page-size-change="pageSizeChange"></Page>
                </div>
            </div>
        </div>

        <Modal
            v-model="updateModal"
            :title="isAdd ? '添加班组' : '编辑班组'"
            :mask-closable="false">
            <div>
                <h2>基础信息</h2>
                <div class="item">
                    <span class="tip">*</span>
                    <span>合作单位:</span>
                    <Select
                        v-model="corpType"
                        style="width: 300px"
                        placeholder="请选择合作单位"
                        v-if="isAdd">
                        <Option
                            v-for="(item, index) in corpEmpList"
                            :value="item.corpId"
                            :key="index"
                            >{{ item.corpName }}</Option
                        >
                    </Select>
                    <Input
                        v-model="corpName"
                        placeholder="请输入班组名称"
                        style="width: 300px"
                        :disabled="!isAdd"
                        v-if="!isAdd"
                        clearable />
                </div>
                <div class="item">
                    <span class="tip">*</span>
                    <span>班组名称:</span>
                    <Input
                        v-model="groupName"
                        placeholder="请输入班组名称"
                        style="width: 300px"
                        clearable />
                </div>
                <div class="item">
                    <span class="tip">*</span>
                    <span>班组编码:</span>
                    <Input
                        v-model="groupCode"
                        placeholder="请输入班组编码"
                        style="width: 300px"
                        clearable />
                </div>
                <div class="item">
                    <span>工种:</span>
                    <Select
                        v-model="workTypeId"
                        style="width: 300px"
                        placeholder="请选择工种"
                        @on-change="getGroupWorkType">
                        <Option
                            v-for="item in workTypelist"
                            :value="item.workTypeId"
                            :key="item.workTypeId"
                            >{{ item.workTypeName }}</Option
                        >
                    </Select>
                </div>
                <h2>责任人信息</h2>
                <div class="item">
                    <span>责任人名称:</span>
                    <Input
                        v-model="responsiblePersonName"
                        placeholder="请输入责任人名称"
                        style="width: 300px"
                        clearable />
                </div>
                <div class="item">
                    <span>电话号码:</span>
                    <Input
                        v-model="responsiblePersonPhone"
                        placeholder="请输入电话号码"
                        style="width: 300px"
                        clearable />
                </div>
                <div class="item">
                    <span>证件类型:</span>
                    <Select
                        v-model="responsibleIdcardType"
                        style="width: 300px"
                        placeholder="请选择证件类型">
                        <Option
                            v-for="(item, index) in cardList"
                            :value="item.id"
                            :key="index"
                            >{{ item.name }}</Option
                        >
                    </Select>
                </div>
                <div class="item">
                    <span>证件号码:</span>
                    <Input
                        v-model="responsibleIdcardNumber"
                        placeholder="请输入证件号码"
                        style="width: 300px"
                        clearable />
                </div>
                <h2>硬件信息</h2>
                <div class="item">
                    <span>视频设备:</span>
                    <Cascader
                        :data="fvsList"
                        v-model="fvsDeviceId"
                        filterable
                        trigger="hover"
                        placeholder="请选择"
                        style="width: 300px"
                        @on-change="getFvsDeviceName"></Cascader>
                </div>
            </div>
            <div slot="footer">
                <el-button
                    @click="cancel(0)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="submitAll"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >保存</el-button
                >
            </div>
        </Modal>
        <Modal
            v-model="deleteModal"
            title="删除"
            width="360px;"
            :mask-closable="false">
            <div style="margin: 10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(1)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="deteleRow"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >确定</el-button
                >
            </div>
        </Modal>
    </div>
</template>
<script>
import { getGrouplist, getGroupAdd, getGroupEdit, getGroupDel, syncGroup, updateCrop } from "@/api/api.js"
import { GroupCreate } from "@/mixins/group.js"
import { initFvsList } from "@/mixins/fvs"
export default {
    mixins: [GroupCreate, initFvsList],
    data() {
        return {
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            projectId: "",
            list: [],
            updateModal: false,
            isAdd: true,
            deleteModal: false,
            keyword: "",
            corpId: "",
            editId: "",
            removeId: "",
            corpType: "",
            btnList: "",
            cardList: [
                {
                    id: 1,
                    name: "居民身份证",
                },
                {
                    id: 2,
                    name: "澳门永久居民证",
                },
                {
                    id: 3,
                    name: "澳门非永久居民证",
                },
                {
                    id: 4,
                    name: "澳门外地雇员身份识别证",
                },
                {
                    id: 5,
                    name: "澳门特别逗留证",
                },
            ],
            fvsList: [],
            fvsDeviceId: [],
            fvsDeviceName: "",
            responsibleIdcardType: "",

            workTypelist: [],
            groupName: "",
            responsiblePersonName: "",
            responsiblePersonPhone: "",
            responsibleIdcardNumber: "",
            corpName: "",
            corpCode: "",
            groupCode: "",
            workTypeId: "", // 工种id
            workTypeName: "", // 工种name
            tableHeight: window.innerHeight - 345,
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.projectId = val.deptId
                this.getcorpList(this.projectId)
                this.getAllList()
                this.getFvsList()
            }
        },
    },
    methods: {
        //视频硬件
        getFvsDeviceName(value, selectedData) {
            this.fvsDeviceId = value
            this.fvsDeviceName = selectedData.map((o) => o.label).join("/")
        },

        //获取班组列表
        getAllList() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                projectId: this.projectId,
                keyword: this.keyword,
                corpId: this.corpId,
            }
            getGrouplist(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.list = res.data.list
                        this.totalCount = res.data.total
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },

        onSerch() {
            this.pageNum = 1
            this.current = 1
            this.getAllList()
        },
        onReset() {
            this.corpId = null
            this.keyword = null
            this.pageNum = 1
            this.current = 1
            this.getAllList()
        },
        // getSearch(){
        //     this.getAllList();
        // },
        // getCorpType(item){
        //     this.corpId = item;
        //     this.getAllList();
        // },
        pageChange(index) {
            this.pageNum = index
            this.getAllList()
        },
        pageSizeChange(index) {
            this.pageSize = index
            this.getAllList()
        },

        /* 班组工种 */
        getGroupWorkType(index) {
            this.workTypelist.find((i) => {
                if (i.workTypeId == index) {
                    this.workTypeName = i.workTypeName
                }
            })
        },

        updateRow(type, index, rows) {
            if (type == 0) {
                this.isAdd = true
                this.corpType = ""
                this.groupName = ""
                this.corpName = ""
                this.responsiblePersonName = ""
                this.responsiblePersonPhone = ""
                this.responsibleIdcardType = ""
                this.responsibleIdcardNumber = ""
                this.groupCode = ""
                this.fvsDeviceId = []
                this.fvsDeviceName = ""
            } else if (type == 1) {
                this.isAdd = false
                this.editId = rows[index].groupId
                this.corpName = rows[index].groupId
                this.groupName = rows[index].groupName
                this.responsiblePersonName = rows[index].responsiblePersonName
                this.responsiblePersonPhone = rows[index].responsiblePersonPhone
                this.responsibleIdcardType = rows[index].responsibleIdcardType
                this.responsibleIdcardNumber = rows[index].responsibleIdcardNumber
                this.corpName = rows[index].corpName
                this.groupCode = rows[index].groupCode
                this.workTypeId = rows[index].workTypeId
                this.workTypeName = rows[index].workTypeName
                this.fvsDeviceId = []
                for (let i = 0; i < this.fvsDeviceList.length; i++) {
                    if (this.fvsDeviceList[i].id == rows[index].fvsDeviceId) {
                        this.fvsDeviceId = [this.fvsDeviceList[i].groupId, this.fvsDeviceList[i].id]
                        this.fvsDeviceName = this.fvsDeviceList[i].groupName + "/" + this.fvsDeviceList[i].name
                    }
                }
            }
            this.updateModal = true
        },
        submitAll() {
            let _IDRe18 =
                /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
            let _IDre15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/
            let _IDMacao = /^[157][0-9]{6}\([0-9Aa]\)/
            if (this.isAdd) {
                if (this.corpType == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请选择合作单位",
                    })
                    return
                }
            }
            if (this.groupName == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写班组名称",
                })
                return
            }
            if (this.groupCode == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写班组编码",
                })
                return
            }
            if (this.responsiblePersonPhone != "") {
                if (!/^1[3456789]\d{9}$/.test(this.responsiblePersonPhone)) {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写正确的手机号",
                    })
                    return
                }
            }
            if (this.responsibleIdcardNumber != "") {
                if (!_IDRe18.test(this.responsibleIdcardNumber) || _IDMacao.test(this.responsibleIdcardNumber)) {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写正确的身份证号码",
                    })
                    return
                }
            }
            let params = {}
            if (this.isAdd) {
                this.corpList.forEach((i) => {
                    if (i.corpId == this.corpType) {
                        this.corpName = i.corpName
                        this.corpCode = i.corpCode
                    }
                })
                params = {
                    corpId: this.corpType,
                    corpName: this.corpName,
                    groupName: this.groupName,
                    responsiblePersonName: this.responsiblePersonName,
                    responsiblePersonPhone: this.responsiblePersonPhone,
                    responsibleIdcardType: this.responsibleIdcardType,
                    responsibleIdcardNumber: this.responsibleIdcardNumber,
                    deptId: this.projectId,
                    corpCode: this.corpCode,
                    groupCode: this.groupCode,
                    fvsDeviceId: this.fvsDeviceId.length > 0 ? this.fvsDeviceId[1] : "",
                    fvsDeviceName: this.fvsDeviceId.length > 0 ? this.fvsDeviceName : "",
                    workTypeId: this.workTypeId,
                    workTypeName: this.workTypeName,
                }
                getGroupAdd(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.success()
                        } else {
                            this.$Message.warning(res.msg)
                        }
                    })
                    .catch((error) => {
                        console.log(error)
                    })
            } else {
                params = {
                    groupName: this.groupName,
                    responsiblePersonName: this.responsiblePersonName,
                    responsiblePersonPhone: this.responsiblePersonPhone,
                    responsibleIdcardType: this.responsibleIdcardType,
                    responsibleIdcardNumber: this.responsibleIdcardNumber,
                    groupId: this.editId,
                    groupCode: this.groupCode,
                    fvsDeviceId: this.fvsDeviceId.length > 0 ? this.fvsDeviceId[1] : "",
                    fvsDeviceName: this.fvsDeviceId.length > 0 ? this.fvsDeviceName : "",
                    workTypeId: this.workTypeId,
                    workTypeName: this.workTypeName,
                }
                getGroupEdit(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.success()
                        } else {
                            this.$Message.warning(res.msg)
                        }
                    })
                    .catch((error) => {
                        console.log(error)
                    })
            }
        },
        success() {
            this.$Message.success("操作成功")
            this.pageNum = this.isAdd ? 1 : this.pageNum
            this.current = this.isAdd ? 1 : this.current
            this.updateModal = false
            this.getAllList()
        },
        remove(index, rows) {
            this.removeID = rows[index].groupId
            this.deleteModal = true
        },
        deteleRow() {
            getGroupDel(this.removeID)
                .then((res) => {
                    if (res.code == 200) {
                        this.deleteModal = false
                        this.$Message.success("操作成功")
                        this.getAllList()
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        cancel(type) {
            if (type == 0) {
                this.updateModal = false
            } else if (type == 1) {
                this.deleteModal = false
            }
        },

        /* 同步班组信息 */
        handleSync(value) {
            let param = {
                groupId: value.groupId,
            }
            syncGroup(param).then((res) => {
                if (res.code == "200") {
                    this.$Message.success("同步成功")
                } else {
                    this.$Message.warning(res.msg)
                }
            })
        },

        /* 更新合作单位信息 */
        handleUpdateCorp() {
            let param = {
                id: this.projectId,
            }
            updateCrop(param).then((res) => {
                this.onSerch()
                this.$Message.success("更新成功")
            })
        },
    },
    mounted() {
        this.projectId = this.$store.state.porjectObject.deptId
        this.btnList = JSON.parse(localStorage.getItem("arr"))
        this.getcorpList(this.projectId)
        this.getAllList()
        this.getFvsList()
        this.getworkTypeList(this.projectId)
    },
}
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
.empGroup {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    .top {
        width: 100%;
        height: 72px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search {
            width: auto;
            margin-left: 20px;
            padding-top: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-bottom: 20px;
                margin-right: 20px;
                span {
                    width: 70px;
                }
            }
        }
        .down {
            width: auto;
            margin-right: 20px;
        }
    }
    .bottom {
        width: 100%;
        margin-top: 10px;
        padding: 20px;
        box-sizing: border-box;
        height: calc(100% - 82px);
        background: #fff;
        border-radius: 10px;
        .down {
            width: 98%;
            margin: 0 auto;
            margin-top: 20px;
        }
        .msg {
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 24px;
                p {
                    margin-right: 10px;
                    font-size: 16px;
                    color: #000;
                    &:nth-child(2) {
                        color: red;
                    }
                }
            }
        }
        .updateCorp {
            cursor: pointer;
            margin-left: 5px;
            padding: 2px 4px;
            font-size: 12px;
            font-weight: 400;
            line-height: 1;
            color: #ffffff;
            border-radius: 3px;
            background-color: var(--themeColor);
        }
    }
}
.item {
    width: 96%;
    display: flex;
    margin: 0 auto;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    padding-left: 16px;
    box-sizing: border-box;
    .tip {
        position: absolute;
        color: red;
        font-size: 16px;
        top: 8px;
        left: 0;
    }
    span {
        width: 90px;
    }
}
/deep/.el-tag.el-tag--success {
    background-color: #e7f8f2;
    border-color: #28d79c;
    color: #3fcf77;
}
</style>
